<template>
	<div class="home-page">
		<div class="home-head">
			<HomeHead />
		</div>
		<div class="home-content">
			<div class="home-content-left">
				<LeftMod></LeftMod>
			</div>
			<div class="home-content-center"></div>
			<div class="home-content-right"></div>
		</div>
	</div>
</template>

<script setup lang="ts">
import HomeHead from "./component/head.vue";
import LeftMod from "./component/left/index.vue";
</script>

<style scoped lang="scss">
.home-page {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #000;
	color: #fff;
	display: flex;
	flex-direction: column;
	.home-head {
		height: 64px;
	}
	.home-content {
		padding: 20px;
		flex: 1;
		overflow: hidden;
		display: flex;
		& > div {
			height: 100%;
			border: 1px solid red;
		}
		.home-content-left,
		.home-content-right {
			flex: 458;
		}
		.home-content-center {
			flex: 884;
			margin: 0 20px;
		}
	}
}
</style>
